<template>
	<view class="my-calendar-container">
		<view class="my-date-header">
			<view>
				<text class="my-date-header-my-day-text">日</text>
			</view>
			<view>
				<text>一</text>
			</view>
			<view>
				<text>二</text>
			</view>
			<view>
				<text>三</text>
			</view>
			<view>
				<text>四</text>
			</view>
			<view>
				<text>五</text>
			</view>
			<view>
				<text class="my-date-header-my-day-text">六</text>
			</view>
		</view>
		<view class="" style="height: 80rpx;"></view>
		<view v-for="(monAll,index) in dateListshow" :key="monAll.month" class="my-date-container">
			<view class="date-month">
				<text class="month-text">{{monAll.month}}</text>
			</view>
			<view class="my-date-day-list" style="min-height:600rpx">
				<view v-for="(item,day) in monAll.dayAll" :key="day"
					@click="selectDate(monAll.month,item,allowSelDateArr.includes(item.timestamp))">
					<view class="my-date-day" :class="{
					active: `${monAll.month}${item.day}` == currentDate,
					'allow-sel': allowSelDateArr.includes(item.timestamp)
				}">
						<text class="my-day-text">{{ item.day }}</text>
						<text class="day-calendar" :style="{ color: item.lunarCalendarColor }"> {{ item.lunarCalendar }}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	const app = getApp()
	import calendar from './calendar.js'
	export default {
		props: {
			// 初始渲染的月份数
			monthNumber: {
				type: [String, Number],
				default: 4
			},
			allowSelDate: {
				tpye: Array,
				default: []
			}
		},
		data() {
			return {
				dateListshow: [],
				currentDate: ''
			}
		},
		watch: {
			allowSelDate:{
				handler: function(newValue,oldValue){
					this.getCalendarData()
					this.currentDate = uni.getStorageSync('currentDate')
				},
				immediate: true

			}
		},
		computed: {
			allowSelDateArr() {
				return this.allowSelDate.map(item => {
					return new Date(item.date.replace(/-/, "/")).getTime()
				})
			},
		},
		methods: {
			selectDate(month, item, allowClick) {
				if (allowClick) {
					this.currentDate = `${month}${item.day}`
					uni.setStorageSync('currentDate', this.currentDate)
					const chooseDate = new Date(this.currentDate.replace("年","/").replace("月","/"))
					console.log("当前选择的日期", chooseDate, this.currentDate)
					this.$emit("onChooseDate",chooseDate)
				}
			},
			getCalendarData() {
				let dayofmonth = new Date()
				let dateListAll = []
				for (let index = 0; index < this.monthNumber; index++) {
					let month = dayofmonth.getMonth() + 1 + index
					let year = dayofmonth.getFullYear()
					let deal = Math.ceil(month / 12)
					if (deal > 1) {
						month = month - 12 * (deal - 1)
						year = year + deal - 1
					}
					let day = new Date(year, month, 0)
					let dateList = []
					day = day.getDate()

					let daybool = ""
					for (let i = 0; i < day; i++) {
						let json = {
							day: i + 1,
							lunarCalendar: "",
						}
						let dayNow = new Date(new Date().getFullYear() + "/" + (new Date()
							.getMonth() + 1) + "/" + new Date().getDate()).getTime()
						let dayListNow = new Date(year + "/" + month + "/" + (i + 1)).getTime()

						daybool = this.getDate(new Date())
						dateList[i] = json
					}
					dateListAll.push({
						month: year + "年" + month + "月",
						monthEn: year + "-" + month,
						dayAll: dateList,
						select: daybool
					})
				}
				// 计算农历 && 日历与星期对应 && 组装外部传来的自定义日历数据
				for (let index = 0; index < dateListAll.length; index++) {
					let date = dateListAll[index]["month"]
					for (let i = 0; i < dateListAll[index]["dayAll"].length; i++) {
						let day = date + dateListAll[index]["dayAll"][i]["day"]
						let commonDate = day.replace("年", "/").replace("月", "/")
						let daylist = commonDate.split("/")
						let commonDateStamp = new Date(commonDate).getTime()
						dateListAll[index]["dayAll"][i]["lunarCalendar"] = calendar
							.GetcDateString(daylist[0], daylist[1], daylist[2])
						dateListAll[index]["dayAll"][i]["timestamp"] = commonDateStamp
						this.allowSelDate.some(item => {
							let itemTimeStamp = new Date(item.date.replace("-", "/")).getTime()
							if (itemTimeStamp == commonDateStamp) {
								dateListAll[index]["dayAll"][i]["lunarCalendar"] = item.dayBottomText
								dateListAll[index]["dayAll"][i]["lunarCalendarColor"] = item.lunarCalendarColor
								dateListAll[index]["dayAll"][i]["timestamp"] = itemTimeStamp
								return true;
							} 
						})
					}

					let day = dateListAll[index].month + "/" + dateListAll[index].dayAll[0].day
					day = day.replace("年", "/").replace("月", "")
					//判断每月第一天是星期几开始
					day = new Date(day).getDay()
					if (day == 0) {
						day = 7
					}
					// 添加占位使得日期与星期对应
					for (let i = 0; i < day; i++) {
						dateListAll[index]["dayAll"].unshift({
							day: "",
							lunarCalendar: "",
						})
					}
				}
				// 计算农历 && 日历与星期对应 && 组装外部传来的自定义日历数据  end
				this.dateListshow = dateListAll
			},
		}
	}
</script>

<style>
	.my-date-container {
		/* margin-top: 80rpx; */
	}

	.my-calendar-container {
		position: relative;
		background-color: #ffffff;
		width: 100%;
		height: 100%;
	}

	.my-date-header {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		padding: 0 32rpx 0 32rpx;
		padding-bottom: 20rpx;
		height: 80rpx;
		border-bottom: 1px solid #f2f2f2;
		align-items: center;
		width: 100%;
		color: #656565;
	}

	.my-date-header view {
		width: 98rpx;
		text-align: center;
		font-weight: 400;
		color: #656565;
	}

	.date-month {
		font-size: 24rpx;
		font-family: PingFangSC, PingFangSC-Regular;
		font-weight: 400;
		text-align: center;
		color: #000000;
		line-height: 34rpx;
		margin: 30rpx 0 12rpx 0;
	}

	.month-text {
		font-size: 32rpx;
		font-weight: 400;
		text-align: center;
		color: #bbbbbb;
	}

	.my-date-day-list {
		display: block;
		padding-left: 32rpx;
	}

	.my-date-day-list>view {
		width: 98rpx;
		float: left;
	}

	.my-date-day {
		float: left;
		display: flex;
		flex-direction: column;
		text-align: center;
		width: 88rpx;
		align-items: center;
		height: 88rpx;
		justify-content: center;
		border-radius: 16rpx;
	}

	.my-date-day.allow-sel .my-day-text {
		color: #000000;
	}

	.my-date-day.allow-sel .day-calendar {
		color: #989898;
	}

	.my-date-day.active {
		background: #FF7A1C;
		color: #ffffff;
	}

	.my-date-day.active text {
		color: #ffffff !important
	}

	.my-date-day.blue.active {
		background: #FF7A1C;
		color: #ffffff;
	}

	.my-day-text {
		font-size: 32rpx;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 500;
		text-align: center;
		color: #BBBBBB;
		line-height: 44rpx;
	}

	.day-calendar {
		font-size: 22rpx;
		font-family: PingFangSC, PingFangSC-Regular;
		font-weight: 400;
		text-align: center;
		color: #BBBBBB;
		line-height: 32rpx;
	}


	.my-date-header-my-day-text {
		color: #FF7A1C;
		font-size: 30rpx;
	}
</style>
